<template>
	<view>
		<view class="nav">
			<view class="nav_nr" :class="nav_id == 1 ? 'nav_nr_xz' : ''" @click="navclick(1)">好评 ({{ haoping }})</view>
			<view class="nav_nr" :class="nav_id == 2 ? 'nav_nr_xz' : ''" @click="navclick(2)">中评 ({{ zhongping }})</view>
			<view class="nav_nr" :class="nav_id == 3 ? 'nav_nr_xz' : ''" @click="navclick(3)">差评 ({{ chaping }})</view>
			<view class="nav_zw"></view>
		</view>
		<view class="box">
			<view class="appraise" v-for="(item, index) in list" :key="index">
				<image class="appraise_left" :src="item.avatar" mode=""></image>
				<view class="appraise_right">
					<view class="appraise_right_title">
						<view class="appraise_right_title_left">{{ item.nickname }}</view>
						<view class="appraise_right_title_right">{{ item.rztime }} 入住</view>
					</view>
					<view class="appraise_right_pf">
						<image
							class="appraise_right_pf_img"
							:src="'/static/' + ttem"
							v-for="(ttem, idex) in renderRating(item.xing)"
							:key="idex"></image>
						{{ item.xing }}
					</view>
					<view class="appraise_right_text">{{ item.content }}</view>
					<view class="appraise_right_img">
						<image
							class="appraise_right_img_nr"
							:src="ttem"
							mode=""
							v-for="(ttem, idex) in item.photo"
							:key="idex"></image>
					</view>

					<view class="reply" v-if="item.huifu">
						<view class="reply_title">房东回复：</view>
						<view class="reply_text">{{ item.huifu }}</view>
					</view>
				</view>
			</view>

			<view class="no_list" v-if="list != null && list.length < 1">
				<image class="no_list_img" src="/static/no_list.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let id = ref(1)
	let listtype = ref(true)
	let list = ref(null)
	let nav_id = ref(1)
	let haoping = ref(1)
	let zhongping = ref(1)
	let chaping = ref(1)

	const navclick = (id) => {
		nav_id.value = id
		indexlist()
	}
	const indexlist = async () => {
		await http.noAuthpost('/srapi/home/qbpingjia', { id: id.value, status: nav_id.value }).then((res) => {
			console.log('返回值', res)
			haoping.value = res.haoping
			zhongping.value = res.zhongping
			chaping.value = res.chaping
			list.value = res.pingjia
		})
	}
	const renderRating = (score) => {
		const stars = []
		for (let i = 1; i <= 5; i++) {
			if (score >= i - 0.5) {
				// 判断是否 >= 当前星级 - 0.5
				if (score >= i) {
					stars.push('10.png') // 满星
				} else {
					stars.push('11.png') // 半星
				}
			} else {
				stars.push('12.png') // 无星
			}
		}
		return stars
	}
	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		id.value = option.id
		indexlist()
	})
	// 触底
	onReachBottom(() => {
		// if (listtype.value) {
		// page.value += 1
		// indexlist()
		// }
	})
</script>

<style lang="less" scoped>
	.nav {
		position: sticky;
		top: 0;
		left: 0;
		box-sizing: border-box;
		width: 750rpx;
		padding: 25rpx 30rpx 40rpx;
		background-color: #f4f5f9;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.nav_zw {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 20rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 0 0;
		}
		.nav_nr {
			min-width: 132rpx;
			background: #ffffff;
			border-radius: 8rpx;
			padding: 10rpx 15rpx;
			font-size: 24rpx;
			font-weight: 500;
			text-align: center;
			color: #000000;
			margin: 0 15rpx;
		}
		.nav_nr_xz {
			background: #e3ebff;
			color: #2367fa;
		}
	}

	.box {
		background: #ffffff;
	}
	.appraise {
		box-sizing: border-box;
		padding: 30rpx;
		border-bottom: 1px solid #f4f5f9;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 10rpx;
		.appraise_left {
			flex-shrink: 0; /* 防止元素被压缩 */
			width: 62rpx;
			height: 62rpx;
			margin-right: 20rpx;
		}
		.appraise_right {
			flex: 1;
			.appraise_right_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;
				.appraise_right_title_left {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
				.appraise_right_title_right {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
				}
			}
			.appraise_right_pf {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				font-weight: 500;
				color: #ff5a01;
				margin-bottom: 30rpx;
				.appraise_right_pf_img {
					width: 19rpx;
					height: 18rpx;
					margin-right: 5rpx;
				}
			}
			.appraise_right_text {
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				margin-bottom: 30rpx;
			}
			.appraise_right_img {
				display: grid;
				/*等额 分成 1fr份*/
				grid-template-columns: 1fr 1fr 1fr 1fr;
				/*行间距 列间距*/
				grid-gap: 15rpx;
				.appraise_right_img_nr {
					width: 141rpx;
					height: 141rpx;
				}
			}
			.reply {
				margin-top: 30rpx;
				padding: 30rpx;
				background: #f4f5f9;
				border-radius: 12rpx;
				.reply_title {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					margin-bottom: 20rpx;
				}
				.reply_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
			}
		}
	}
	//
</style>
